import React, {Component} from 'react';
import {Link} from 'react-router-dom'
import {Picker} from 'react-weui'
import 'weui'
import './order.css'

class Order extends Component {
    constructor(props) {
        super(props)
        document.title = '订单页面'
        this.state ={
            picker_show: true,
            picker_value: '',
            picker_group: [
                {
                    items: [
                        {
                            label: '2017',
                        },
                        {
                            label: 'Item2 (Disabled)',
                            disabled: true
                        },
                        {
                            label: '2018'
                        },
                        {
                            label: '2019'
                        },
                        {
                            label: '2020'
                        }
                    ]
                },
                {
                    items: [
                        {
                            label: '01',
                        },
                        {
                            label: '02 (Disabled)',
                            disabled: true
                        },
                        {
                            label: '03'
                        },
                        {
                            label: '04'
                        },
                        {
                            label: '05'
                        },
                        {
                            label: '06',
                        },
                        {
                            label: '07 (Disabled)',
                            disabled: true
                        },
                        {
                            label: '08'
                        },
                        {
                            label: '00'
                        },
                        {
                            label: '10'
                        },
                        {
                            label: '11'
                        },
                        {
                            label: '12'
                        }
                    ]
                },
                {
                    items: [
                        {
                            label: '01',
                        },
                        {
                            label: '02 (Disabled)',
                            disabled: true
                        },
                        {
                            label: '03'
                        },
                        {
                            label: '04'
                        },
                        {
                            label: '05'
                        },
                        {
                            label: '06',
                        },
                        {
                            label: '07 (Disabled)',
                            disabled: true
                        },
                        {
                            label: '08'
                        },
                        {
                            label: '00'
                        },
                        {
                            label: '10'
                        },
                        {
                            label: '11'
                        },
                        {
                            label: '12'
                        },
                        {
                            label: '13'
                        },
                        {
                            label: '14'
                        },
                        {
                            label: '15'
                        },
                        {
                            label: '16'
                        },
                        {
                            label: '17'
                        },
                        {
                            label: '18'
                        },
                        {
                            label: '19'
                        },
                        {
                            label: '20'
                        },
                        {
                            label: '21'
                        },
                        {
                            label: '22'
                        },
                        {
                            label: '23'
                        },
                        {
                            label: '24'
                        },
                        {
                            label: '25'
                        },
                        {
                            label: '26'
                        },
                        {
                            label: '27'
                        },
                        {
                            label: '28'
                        },
                        {
                            label: '29'
                        },
                        {
                            label: '30'
                        },
                        {
                            label: '21'
                        }
                    ]
                },
                {
                    items: [
                        {
                            label: '01',
                        },
                        {
                            label: '02 (Disabled)',
                            disabled: true
                        },
                        {
                            label: '03'
                        },
                        {
                            label: '04'
                        },
                        {
                            label: '05'
                        },
                        {
                            label: '06',
                        },
                        {
                            label: '07 (Disabled)',
                            disabled: true
                        },
                        {
                            label: '08'
                        },
                        {
                            label: '00'
                        },
                        {
                            label: '10'
                        },
                        {
                            label: '11'
                        },
                        {
                            label: '12'
                        },
                        {
                            label: '13'
                        },
                        {
                            label: '14'
                        },
                        {
                            label: '15'
                        },
                        {
                            label: '16'
                        },
                        {
                            label: '17'
                        },
                        {
                            label: '18'
                        },
                        {
                            label: '19'
                        },
                        {
                            label: '20'
                        },
                        {
                            label: '21'
                        },
                        {
                            label: '22'
                        },
                        {
                            label: '23'
                        },
                        {
                            label: '24'
                        }]},
                {
                    items: [
                        {
                            label: '00',
                        },
                        {
                            label: '30 (Disabled)',
                            disabled: true
                        }
                    ]
                }
            ],
            city_show: false,
            city_value: ''
        }
    }

    toPay() {
        this.props.history.push('/wx/pay')
    }

    render() {
        return (
            <div className='mormal-font order'>
                <div className="white-bg wrap-order">
                    <div className='flex order-div'>
                        <div onClick={e=>{
                            e.preventDefault()
                            this.setState({picker_show: true})
                        }}>时间</div>
                        <div>选择出发</div>
                    </div>
                    <div className='flex order-div'>
                        <div>起点</div>
                        <div>选择上车</div>
                    </div>
                    <div className='flex order-div'>
                        <div>终点</div>
                        <div>选择下车</div>
                    </div>
                </div>
                <div className='order-button'>
                    <div>拼车</div>
                    <div>包车</div>
                </div>
                <div className="white-bg wrap-order">
                    <div className='flex order-div'>
                        <div>人数</div>
                        <div><span>_</span><span>1</span><span>+</span></div>
                    </div>
                    <Link to={'/wx/cartype'}>
                        <div className='flex order-div'>
                            <div>车型</div>
                            <div>大面包车</div>
                        </div>
                    </Link>
                    <div className='flex order-div'>
                        <div>费用</div>
                        <div>888</div>
                    </div>
                </div>
                <Link to='/wx/rider'>
                    <div className="order-flex white-bg wrap-order order-div">
                        <div>王秉鸿</div>
                        <div>代人叫车</div>
                    </div>
                </Link>
                <Link to='/wx/comment'>
                    <div className="order-flex white-bg wrap-order order-div">
                        <div>备注</div>
                        <div>订单特殊</div>
                    </div>
                </Link>
                <div className='order-button'>
                    <button onClick={this.toPay.bind(this)}>提交订单</button>
                </div>
                <Picker
                    onChange={selected => {
                        let value = ''
                        selected.forEach((s, i) => {
                            value = this.state.picker_group[i]['items'][s].label
                        })
                        this.setState({
                            picker_value: value,
                            picker_show: false
                        })
                    }}
                    groups={this.state.picker_group}
                    show={this.state.picker_show}
                    onCancel={e => this.setState({picker_show: false})}
                />
            </div>
        )
    }

}

export default Order